<template>
  <!-- 地图图层显示 -->
  <van-button class="mapShow" @click="show = true" icon="points" />

  <van-action-sheet v-model:show="show" :actions="actions" @select="onSelect" />
</template>

<script setup>
import { imageShow, mapShow } from "./Hooks/index"
import { showToast } from "vant"

var map = ref()

onMounted(() => {
  map = ref(useGlobalMap())
})

const show = ref(false)
const actions = [
  { id: 1, name: "矢量" },
  { id: 2, name: "影像" },
]
const onSelect = (item) => {
  // 默认情况下点击选项时不会自动收起
  // 可以通过 close-on-click-action 属性开启自动收起
  console.log(item)
  show.value = false
  showToast(item.name)
  if (item.id == 1) {
    mapShow(map)
  } else if (item.id == 2) {
    imageShow(map)
  }
}
</script>

<style scoped>
.mapShow {
  width: 25px;
  height: 25px;
  background-color: rgba(255, 255, 255, 0.5);

  position: fixed;
  top: 100px;
  right: 5px;
  z-index: 100;
  /* color: rgb(28, 3, 3); */
  font-size: 5px;
  border: none;
  border-radius: 10px;
}
</style>
